<template>
  <div class="w-[300px] rounded-content-wrap overflow-hidden shadow-md bg-white">
    <div class="header bg-primary">
      <div class="flex h-[90px] w-full justify-between items-centerx px-4">
        <div class="flex items-center space-x-2">
          <el-avatar
            size="large"
            :src="userInfo.iconUrl && userInfo.iconUrl[0] && userInfo.iconUrl[0].url"
          ></el-avatar>
          <div class="text-white">
            <div>{{ userInfo.accountName }}</div>
            <div class="text-gray-300 text-xs">{{ userInfo.orgName }}</div>
          </div>
        </div>

        <div
          class="flex items-center text-white space-x-2 cursor-pointer"
          @click="handleGoPath('/admin/userCenter')"
        >
          <span class="">个人中心</span>
          <i class="el-icon-caret-right" />
        </div>
      </div>
    </div>

    <ul class="bg-white">
      <li class="" @click="$router.push('/login')">
        <span>切换账号</span>
        <i class="el-icon-arrow-right" />
      </li>
      <!-- <li class="">
        <span>帮助中心</span>
        <i class="el-icon-arrow-right" />
      </li> -->
      <el-divider class="my-0 -mx-4 w-[120%]"></el-divider>
      <li class="" @click="handleLogout">
        <span>退出登录</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { mapGetters } from 'vuex'
import { ActionsType } from '@/actions/user'
export default Vue.extend({
  components: {},
  data() {
    return {}
  },
  head: {
    title: '用户中心',
  },
  computed: {
    ...mapGetters('user', ['userInfo']),
  },
  methods: {
    handleGoPath(path) {
      this.$router.push(path)
    },
    handleLogout() {
      this.$store.dispatch(ActionsType.logout)
    },
  },
})
</script>
<style lang="scss" scoped>
.header {
  /* background: linear-gradient(138deg, #93daff 31%, #006eff 77%); */
}

li {
  @apply p-4 h-10 flex justify-between items-center cursor-pointer hover:bg-gray-200;
}
</style>
